<template>
    <div class="container">
        <h1 class="title">123</h1>
        <p class="info">
            <span>发表时间: 123</span>
            <span>点击: 123次</span>
        </p>
        <hr>
        <vue-preview :slides="target.urlList" @close="handleClose"></vue-preview>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                target : {title : '美图', date : '2012-12-12 12:12:12', count : 0, urlList : [
                    {
                        src: '/images/1.jpg',
                        msrc: '/images/1.jpg',
                        alt: 'picture1',
                        title: 'Image Caption 1',
                        w: 600,
                        h: 400
                    },
                    {
                        src: '/images/2.jpg',
                        msrc: '/images/2.jpg',
                        alt: 'picture2',
                        title: 'Image Caption 2',
                        w: 1200,
                        h: 900
                    },
                    {
                        src: '/images/3.jpg',
                        msrc: '/images/3.jpg',
                        alt: 'picture3',
                        title: 'Image Caption 3',
                        w: 1200,
                        h: 900
                    }
                ]}
            }
        },
        methods: {
            handleClose () {
                console.log('close event')
            }
        }
    }
</script>

<style scoped lang="less">
    .container{
        padding: 0 4px;
        .title{
            font-size: 16px;
            text-align: center;
            margin:15px 0;
            color: red;
        }
        .info{
            font-size:13px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
    }

</style>
<style>
    .my-gallery{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .my-gallery figure{
        margin: 0 0 10px 0;
        width:100px;
    }
    .my-gallery figure img{
        height:80px;
        vertical-align: middle;
    }
</style>